<template>
  <el-dialog
    v-el-drag-dialog
    :title="type === 'add' ? '新增销售区域' : '编辑销售区域'"
    :visible.sync="visible"
    width="500px"
    @closed="reset"
  >
    <el-form
      ref="dataForm"
      class="form"
      :rules="rules"
      :model="temp"
      label-position="right"
      label-width="100px"
    >
      <el-form-item label="区域简称:" prop="saleDesc">
        <el-input
          v-model="temp.saleDesc"
          placeholder="请输入"
          clearable
          :maxlength="20"
          show-word-limit
        />
      </el-form-item>
      <el-form-item label="所属机构:" prop="orgId">
        <el-tree-select
          v-model="temp.orgId"
          :clearable="false"
          :disabled="type === 'edit'"
          class="tree-select"
          :popover-width="360"
          :select-params="{
            clearable: true,
            placeholder: '请选择',
            loading: $loadingPlugin.getTreeData,
          }"
          :tree-params="{
            'expand-on-click-node': false,
            'highlight-current': true,
            'filterable': true,
            props: {
              value: 'orgId',
              label: 'orgName',
              disabled: 'disabled',
            },
            data: treeData,
          }"
        />
      </el-form-item>
      <el-form-item label="显示顺序:" prop="showIndex">
        <el-input-number
          v-model="temp.showIndex"
          :max="9999"
          :precision="0"
          style="width: 100%;"
          clearable
        />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false"> 关闭 </el-button>
      <el-button
        :loading="$loadingPlugin.add || $loadingPlugin.edit"
        type="primary"
        @click="success"
      >
        保存
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { saveLineSaleArea } from '@/api'
  import { mapGetters } from 'vuex'
  import getTreeData from '@/utils/jsonTree'

  export default {
    name: 'add',
    data() {
      return {
        visible: false,
        type: 'add',
        treeData: [],
        temp: {
          saleDesc: '',
          orgId: '',
          showIndex: undefined
        },
        rules: {
          saleDesc: [{ required: true, message: '请输入区域简称', trigger: 'change' }],
          orgId: [{ required: true, message: '请选择机构', trigger: 'change' }]
        }
      }
    },
    computed: {
      ...mapGetters(['orgList'])
    },
    async created() {
      await this.getTreeData()
    },
    methods: {
      open(temp) {
        return new Promise((resolve) => {
          this.resolve = resolve
          this.visible = true
          if (temp) {
            this.temp = Object.assign(this.temp, temp)
            this.type = 'edit'
          }
        })
      },
      // 获取所属机构数据
      async getTreeData() {
        const data = this.orgList.map((item) => ({
          label: item.orgName,
          ...item
        }))
        this.treeData = getTreeData(data)
      },
      success() {
        this.$refs.dataForm.validate((valid) => {
          if (!valid) return
          const org = this.orgList.find((item) => item.orgId === this.temp.orgId)
          const params = {
            orgId: org.orgId,
            orgCode: org.orgCode,
            orgName: org.orgName,
            orgSNNo: org.orgSNNo,
            saleDesc: this.temp.saleDesc
          }
          if (this.temp.showIndex) params.showIndex = this.temp.showIndex
          if (this.type === 'add') {
            this.add(params)
          } else {
            this.edit(params)
          }
        })
      },
      async add(params) {
        await saveLineSaleArea(params)
        this.resolve()
        this.visible = false
        this.$notify({
          title: '提示',
          message: '新增成功',
          type: 'success',
          duration: 2000
        })
      },
      async edit(params) {
        await saveLineSaleArea(params)
        this.resolve(this.temp)
        this.visible = false
        this.$notify({
          title: '提示',
          message: '更新成功',
          type: 'success',
          duration: 2000
        })
      },
      reset() {
        this.type = 'add'
        this.temp = {
          saleDesc: '',
          orgId: '',
          showIndex: undefined
        }
        this.$nextTick(() => {
          this.$refs.dataForm.clearValidate()
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
.form {
  ///deep/ .el-input-number__decrease {
  //  border-left: 1px solid #DCDFE6;
  //}
}
</style>
